@import "common.less";

.list{min-height: 1336/@rem;position: relative;
  &:before {content: ''; position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; left: 50%; max-width:@sreen; margin-left:-250px; background: url("../img/bg-sign.jpg") #140f29 no-repeat; background-size: cover;}
  .head{width:640/@rem; margin:0 auto; z-index: 1; position:relative;
    .count{color:#fff; font-size:32/@rem; position:absolute; top:80/@rem; left:150/@rem;
      span{font-size:60/@rem; display:block;}
    }
  }
  .content{width:640/@rem; margin:-100/@rem auto 0; background-color: lighten(#4954a2,7.5%); z-index: 2;min-height: 960/@rem;border-radius: 10px; position:relative; z-index:2;
    &.youth{background-color:lighten(#c5385b,7%);
      .search{
        input{border-color:#f97288; color:#ffd1d5;
          &::-webkit-input-placeholder{color:#ffd1d5;}
        }
        button{color:#9e2f3a; background:#f2a5a8;}
      }
      .list-area,.search-area{
        .deckgrid{
          .li{border-color:#b62a4d; background:#b62a4d;}
        }
      }
    }
    .search{margin:30/@rem auto; width:568/@rem; height:69/@rem; position:relative;
      input{width:100%; height:100%; color:#838fdf; border-radius:34.5/@rem; background:none; border:1px #8590da solid; text-indent:30/@rem; font-size:24/@rem;
        &::-webkit-input-placeholder{color:#838fdf;}
      }
      button{position:absolute; right:-1px; text-align:center; top:1px; height:100%; color:#b9c1f9; font-size:32/@rem; width:154/@rem; border-radius:32.5/@rem; border:none; background:#7b87dd;}
    }
    .list-area,.search-area{padding:20/@rem; overflow:hidden; padding-bottom:150/@rem;
      .deckgrid{ margin-bottom:10/@rem;
        //-moz-column-count:2; -webkit-column-count:2; column-count:2; -moz-column-gap: 1em;
        //-webkit-column-gap: 1em; column-gap: 1em;
        .li{display: block;text-align:center; border:5/@rem #3c4794 solid; position:relative; margin-bottom:40/@rem; overflow:hidden; min-height:200/@rem; background:#3c4794;
          //-moz-page-break-inside: avoid; -webkit-column-break-inside: avoid; break-inside: avoid;
          img{min-width:100%; vertical-align:bottom;}
          p{position:absolute; width:100%; height:60/@rem; line-height:60/@rem; left:0; bottom:0; background:rgba(0,0,0,0.8); color:#fff;}
          em{margin-left:15/@rem; font-style:normal;}
        }
      }
      .more{display:block; text-align:center; color:#fff;clear: both;
        img{vertical-align:-6/@rem; width:25/@rem; margin-right:10/@rem; animation:moreload 1s linear infinite; -webkit-animation:moreload 1s linear infinite;}
      }
    }
  }
  .title{
    height: 90/@rem;
    li{width: 50%;float: left;font-size: 20/@rem;text-align: center;height: 100%;
      .name{font-size: 36/@rem;margin-top: 2/@rem;}
      &.create{background: url("../img/title-blue.jpg") repeat-x;background-size: auto 100%;color: #c3c9ff;border-radius:10px 0 0 0;
        &.active{background: url("../img/title-blue-active.jpg") repeat-x;background-size: auto 100%;}
      }
      &.youth{background: url("../img/title-red.jpg") repeat-x;background-size: auto 100%;color: #ffd1d5;border-radius:0 10px 0 0;}
      &.active{background: url("../img/title-red-active.jpg") repeat-x;background-size: auto 100%;}
    }
  }

  @keyframes moreload{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
  }
  @-webkit-keyframes moreload{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
  }
}

.deckgrid{overflow: hidden;
  &[deckgrid]::before {
    /* Specifies that the grid should have a maximum of 4 columns. Each column will have the classes 'column' and 'column-1-4' */
    content: '2 .column.column-1-2';
    font-size: 0; /* See https://github.com/akoenig/angular-deckgrid/issues/14#issuecomment-35728861 */
    visibility: hidden;
  }
  .column{float: left;
    &:nth-child(2n){float: right;}
  }
  .column-1-2{
    width: 48%;position: relative;
    img{width: 100%;display: block;}
    p{position:absolute; width:100%; height:60/@rem; line-height:60/@rem; left:0; bottom:0; background:rgba(0,0,0,0.8); color:#fff;}
    em{margin-left:15/@rem; font-style:normal;}
  }
}